<template>
	<view class="wp_-flex-col page">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="wp_-flex-row wp_-justify-center wp_-items-center wp_-relative nav-content">
				<text class="nav-title">我的订单</text>
			</view>
		</view>

		<!-- 订单类型切换 -->
		<view class="wp_-flex-row wp_-justify-between tab-section">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="['tab-item', currentTab === index ? 'active' : '']"
				@tap="switchTab(index)"
			>
				<text class="tab-text">{{tab.name}}</text>
				<view v-if="currentTab === index" class="tab-line"></view>
			</view>
		</view>

		<!-- 有订单数据时显示订单列表组件 -->
		<OrderList 
			v-if="orderList.length > 0"
			:order-list="orderList"
			:current-tab="currentTab"
			@refresh="refreshOrders"
		/>

		<!-- 空订单提示 -->
		<view class="empty-content" v-else>
			<image class="empty-image" src="/static/order/e186e04e8774da64b58c96a8bb479840.png" />
			<text class="empty-text">您暂时还没有订单哦～</text>
			<view class="order-btn" @tap="goToMenu">
				<text class="btn-text">去点单</text>
			</view>
		</view>
	</view>
</template>

<script>
import OrderList from './OrderList.vue'

export default {
	components: {
		OrderList
	},
	data() {
		return {
			currentTab: 0,
			tabs: [
				{ name: '全部订单' },
				{ name: '堂食订单' },
				{ name: '外卖订单' }
			],
			orderList: [],
			originalOrders: []
		}
	},
	onLoad() {
		// 添加调试日志
		console.log('订单列表页 - 原始订单数据:', this.originalOrders)
		
		this.originalOrders = [
			{
				orderNo: '202403150001',
				status: 'completed',
				type: 'dine-in',
				createTime: '2024-03-15 12:30:45',
				totalPrice: 36,
				products: [
					{
						name: '招牌柠檬茶',
						specs: '常温，7分糖',
						price: 18,
						count: 2
					}
				]
			},
			{
				orderNo: '202403140002',
				status: 'processing',
				type: 'takeout',
				createTime: '2024-03-14 18:20:33',
				totalPrice: 45,
				products: [
					{
						name: '芒果果茶',
						specs: '少冰，5分糖',
						price: 15,
						count: 2
					},
					{
						name: '薯条',
						specs: '1份',
						price: 15,
						count: 1
					}
				]
			},
			{
				orderNo: '202403130003',
				status: 'completed',
				type: 'dine-in',
				createTime: '2024-03-13 15:10:22',
				totalPrice: 33,
				products: [
					{
						name: '鸭屎香柠檬茶',
						specs: '少冰，7分糖',
						price: 16,
						count: 1
					},
					{
						name: '薯条',
						specs: '1份',
						price: 17,
						count: 1
					}
				]
			}
		]
		
		// 添加调试日志
		console.log('订单列表页 - 加载测试数据后:', this.originalOrders)
		
		// 保存到本地存储
		uni.setStorageSync('orderList', this.originalOrders)
		
		this.loadOrders()
	},
	methods: {
		// 切换标签
		switchTab(index) {
			this.currentTab = index
			this.loadOrders()
		},
		
		// 加载订单数据
		loadOrders() {
			// 添加调试日志
			console.log('订单列表页 - loadOrders 方法执行')
			
			if(this.currentTab === 0) {
				this.orderList = [...this.originalOrders]
			} else if(this.currentTab === 1) {
				this.orderList = this.originalOrders.filter(order => order.type === 'dine-in')
			} else {
				this.orderList = this.originalOrders.filter(order => order.type === 'takeout')
			}
			
			// 添加调试日志
			console.log('订单列表页 - 当前显示的订单列表:', this.orderList)
		},
		
		// 刷新订单列表
		refreshOrders() {
			this.loadOrders()
		},
		
		// 去点单
		goToMenu() {
			uni.switchTab({
				url: '/pages/menu/menu'
			})
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	background-color: #f8fafb;
	min-height: 100vh;
	
	// 顶部导航
	.nav-header {
		background-color: #fff;
		padding-top: 96rpx;
		
		.nav-content {
			padding: 28rpx 24rpx;
			position: relative;
			
			.back-icon {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				left: 24rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			
			.nav-title {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.9);
				line-height: 1.2;
			}
			
			.nav-right {
				position: absolute;
				right: 24rpx;
				top: 50%;
				transform: translateY(-50%);
				padding: 16rpx 24rpx;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 32rpx;
				border: 1rpx solid #e3e6eb;
				
				.search-icon {
					width: 36rpx;
					height: 12rpx;
				}
				
				.more-icon {
					width: 32rpx;
					height: 32rpx;
					margin-left: 54rpx;
				}
			}
		}
	}
	
	// 订单类型切换
	.tab-section {
		background-color: #fff;
		padding: 28rpx 60rpx;
		
		.tab-item {
			position: relative;
			padding: 0 10rpx;
			
			.tab-text {
				font-size: 30rpx;
				color: #a2a2a2;
				line-height: 1.2;
			}
			
			&.active {
				.tab-text {
					color: #77d431;
				}
				
				.tab-line {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -30rpx;
					width: 40rpx;
					height: 4rpx;
					background-color: #8cd548;
					border-radius: 322rpx;
				}
			}
		}
	}
	
	// 空订单提示
	.empty-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 196rpx;
		
		.empty-image {
			width: 446rpx;
			height: 240rpx;
		}
		
		.empty-text {
			margin-top: 148rpx;
			font-size: 28rpx;
			color: #a2a2a2;
			line-height: 1.2;
		}
		
		.order-btn {
			margin-top: 22rpx;
			padding: 28rpx 120rpx;
			background-color: #8cd548;
			border-radius: 308rpx;
			
			.btn-text {
				font-size: 32rpx;
				color: #fff;
				line-height: 1.2;
			}
		}
	}
}
</style>